<template>
	<view>
		<!-- 分享示例 -->
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
			<uni-popup-share></uni-popup-share>
		</uni-popup>
	</view>
	<uni-nav-bar left-icon="left" @clickLeft="gotoindex()" height="30px">
		<view class="daohanglanhezi">
			<image class="shoucang1" src="../../static/img/yishoucang.png" mode=""></image>
		</view>
		<view class="daohanglanhezi" @click="shareToggle()">
			<image class="fenxiang" src="../../static/img/fenxiang.png" mode=""></image>
		</view>

	</uni-nav-bar>

	<view class="page">
		<view class="smallpage">
			<text class="title">
				夏天不能光脚丫、不能吃冰激凌？别用养生折腾孩子了
			</text>
			<view class="liulan">
				<text>9555次浏览</text>
				<text>2222人喜欢</text>
			</view>
			<view class="content">

				<textarea cols="30" rows="20">
					{{xiangqing.desc}}
		</textarea>
				<image :src="xiangqing.bigPicture"></image>
		
			</view>
			<view class="shoucang">
				<view class="shoucanghezi">
					<img src="/static//img/kongxin.png" alt="">
					<text>喜欢 1023</text>
				</view>
			</view>


			<view class="tuijianyuedu">
				<text class="tuijianbiaoti">推荐阅读</text>


				<view class="dahezi">
					<view class="allcontent">
						<view class="wenzineirong">
							<textarea>夏天不能光脚丫、不能吃冰激凌?别用养生折腾孩子了</textarea>
							<view class="liulian">
								<text>9555次浏览</text>
								<text>2222人喜欢</text>
							</view>
						</view>
						<view class="tupianhezi ">
							<image src="/static/img/ceshi.png" mode=""></image>
						</view>
					</view>
				</view>

				<view class="dahezi">
					<view class="allcontent">
						<view class="wenzineirong">
							<textarea>夏天不能光脚丫、不能吃冰激凌?别用养生折腾孩子了</textarea>
							<view class="liulian">
								<text>9555次浏览</text>
								<text>2222人喜欢</text>
							</view>
						</view>
						<view class="tupianhezi ">
							<image src="/static/img/ceshi.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token:'',
				xiangqing:{}
			}
		},
		onLoad(options) {
			this.token=uni.getStorageSync("Authorization")
			console.log(options)
			this.huoquxiangqing(options.id)
		},
		methods: {
			gotoindex() {
				uni.navigateBack({
					url:'/pages/shicaitiaoxuan/shicaitiaoxuan'
				})
			},
			shareToggle() {
				this.$refs.share.open()
			},
			huoquxiangqing(id){
				uni.request({
					url:this.$serverUrl+"/api/encyclopedia/"+id,
					header:{
						Authorization:this.token
					},
					success: (result) => {
						this.xiangqing=result.data.data
						console.log("详情：",this.xiangqing)
					}
					
				})
			}
			

		}
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	uni-nav-bar {
		margin-top: 30px;
		display: flex;
		width: 100%;
	}

	uni-nav-bar image {
		margin-top: 6px;
		width: 25px;
		height: 25px;

	}
	.shoucang{
		margin-left: 10px;
	}
	.fenxiang{
		margin-left: 10px;
	}

	.daohanglanhezi {
		width: 30px;
		height: 30px;
		display: flex;
	}

	.smallpage {

		height: 100%;
		width: 94%;
		display: flex;
		flex-direction: column;
		margin-top: 3%;
		margin-left: 3%;
		margin-right: 3%;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
	}

	.liulan {
		margin-top: 20px;
		color: #999eba;
		width: 38%;
		display: flex;
		justify-content: space-between;
		font-size: 13px;
	}

	.content {
		color: #515462;
		margin-top: 20px;
		display: flex;
		flex-direction: column;
	}

	.content textarea {
		width: 100%;
		line-height: 30px;
	}

	.content image {
		width: 100%;
		margin: 5px 0 5px 0;
		border-radius: 20px;

	}

	.shoucang {
		display: flex;
		margin-top: 10px;

		border-bottom: 1px solid #c1c1c1;
	}

	.shoucanghezi {
		margin: auto;
		display: flex;
		flex-direction: column;
		margin-bottom: 30px;
	}

	.shoucanghezi image {
		width: 50px;
		height: 50px;
	}

	.shoucanghezi text {
		display: block;
		text-align: center;
		margin-left: -10px;
		color: #a7acca;
	}

	.dahezi {
		width: 100%;
		height: 130px;


	}

	.tuijianbiaoti {
		font-size: 20px;
		font-weight: 300;
	}

	.allcontent {
		margin: 3% 3% 0 3%;
		border-bottom: 1px solid gray;
		width: 94%;
		height: 90%;
		display: flex;
	}

	.wenzineirong {
		display: flex;
		flex-direction: column;
		width: 70%;
		height: 80%;

	}

	.contenthezi {
		display: flex;

	}

	.wenzineirong textarea {
		height: 47%;
		width: 100%;
		overflow: hidden;
	}

	.liulian {
		margin-top: 8%;
		color: #999eba;
		width: 100%;
	}

	.tupianhezi {
		border-radius: 10px;

		margin-left: 10px;
		width: 30%;
		height: 80%;
		background-color: aquamarine;
	}

	.tupianhezi image {
		border-radius: 10px;
		width: 100%;
		height: 100%;
	}
</style>
